<template>
    <div v-if="isSettingsOpen" class="settings-content">
        <!-- Toast 提示 -->
        <div v-if="showToast" class="toast" :class="{ 'toast-success': toastType ==='success', 'toast-error': toastType === 'error' }"
             :style="{ opacity: toastOpacity }">
            {{ toastMessage }}
        </div>
        <label for="model-select">选择大模型:</label>
        <select id="model-select" v-model="selectedModel">
            <option v-if="!apiStore.modelList.length" value="">未获取到大模型列表，请检查服务器</option>
            <option v-else v-for="model in apiStore.modelList" :key="model.models_name" :value="model.models_name">{{ model.models_name }}</option>
        </select>
        <p>当前选中的模型名称: {{ selectedModel }}</p>
        <label for="prompt-textarea">初始状态提示词:</label>
        <textarea id="prompt-textarea" v-model="initialPrompt"></textarea>
        <button @click="saveSettings">保存设置</button>
    </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue';
import { useApiStore } from '../store/api';

const apiStore = useApiStore();
// 存储选择的大模型名称
const selectedModel = ref('');
// 存储初始状态提示词
const initialPrompt = ref('');
// 控制设置窗口是否打开
const isSettingsOpen = ref(true);

// Toast 相关
const showToast = ref(false);
const toastMessage = ref('');
const toastType = ref('');
const toastOpacity = ref(1);

// 显示 Toast 提示
const showToastMessage = (message, type) => {
    toastMessage.value = message;
    toastType.value = type;
    toastOpacity.value = 1;
    showToast.value = true;
    setTimeout(() => {
        const fadeOutInterval = setInterval(() => {
            toastOpacity.value = Math.max(toastOpacity.value - 0.1, 0);
            if (toastOpacity.value === 0) {
                clearInterval(fadeOutInterval);
                showToast.value = false;
            }
        }, 100);
    }, 3000);
};

// 保存设置的方法
const saveSettings = async () => {
    console.log('Selected Model:', selectedModel.value);
    try {
        const response = await apiStore.setAppKeyInfo(selectedModel.value, initialPrompt.value);
        if (response && response.message && response.message.includes('设置保存成功')) {
            // 更新前端数据
            apiStore.appKeyInfo.system_model = initialPrompt.value;
            showToastMessage(response.message,'success');
        } else {
            showToastMessage('保存设置失败：未收到有效响应', 'error');
        }
    } catch (error) {
        showToastMessage('保存设置失败', 'error');
        console.error('保存设置失败:', error);
    }
};

onMounted(async () => {
    await nextTick(() => {
        // 假设 get_appkey_info 返回的 select_model 是模型名称
        const defaultModelName = apiStore.appKeyInfo.select_model;
        console.log('Default Model Name from API:', defaultModelName);
        console.log('Model List:', apiStore.modelList);
        const targetModel = apiStore.modelList.find(model => model.models_name === defaultModelName);
        if (targetModel) {
            selectedModel.value = targetModel.models_name;
            console.log('Selected Model Name after finding:', selectedModel.value);
        } else if (apiStore.modelList.length > 0) {
            selectedModel.value = apiStore.modelList[0].models_name;
            console.log('Selected First Model Name:', selectedModel.value);
        }
        initialPrompt.value = apiStore.appKeyInfo.system_model;
    });
});
</script>

<style scoped>
.settings-content {
    height: 100%;
    padding: 10px;
    background-color: white;
}

.settings-content label {
    display: block;
    margin-bottom: 5px;
}

.settings-content select,
.settings-content textarea {
    width:calc(100% - 20px) ;
    margin-bottom: 15px;
    padding: 5px;
}

/* Toast 样式 */
.toast {
    position: relative;
    width: 100%;
    height: 16px;
    line-height: 16px;
    font-size: 12px;
    text-align: center;
    color: white;
    z-index: 10000;
}

.toast-success {
    background-color: green;
}

.toast-error {
    background-color: red;
}
</style>